<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
<!DOCTYPE html>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default" id="tb" margin="0 auto">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="contain.html">学生 <span class="sr-only">(current)</span></a></li>
                <li><a href="/list.html">老师</a></li>
                <li class="dropdown">

                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">查找</button>
                <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target=".bs-example-modal-lg">添加
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="con">
    <div class="row">
        <div class="col-md-12 stretch-card">
            <div class="card">
                <div class="card-body">
                    <p class="card-title">&ensp;&ensp;&ensp;
                    <h1>学生信息表</h1></p>
                    <div class="table-responsive">
                        <div id="recent-purchases-listing_wrapper"
                             class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                            <div class="row">
                                <div class="col-sm-12 col-md-6"></div>
                                <div class="col-sm-12 col-md-6"></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="recent-purchases-listing" class="table dataTable no-footer" role="grid">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1" aria-sort="ascending"
                                                aria-label="Name: activate to sort column descending"
                                                style="width: 137px;">
                                                ID
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Status report: activate to sort column ascending"
                                                style="width: 137px;">姓名
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Office: activate to sort column ascending"
                                                style="width: 137px;">年龄
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Price: activate to sort column ascending"
                                                style="width: 137px;">
                                                性别
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Date: activate to sort column ascending"
                                                style="width: 137px;">手机号
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Gross amount: activate to sort column ascending"
                                                style="width: 137px;">胸围
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Gross amount: activate to sort column ascending"
                                                style="width: 137px;">地址
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Gross amount: activate to sort column ascending"
                                                style="width: 137px;">身高
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="recent-purchases-listing"
                                                rowspan="1" colspan="1"
                                                aria-label="Gross amount: activate to sort column ascending"
                                                style="width: 137px;">操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd" v-for="student in studentList.list">
                                            <td class="sorting_1">{{student.id}}</td>
                                            <td>{{student.sname}}</td>
                                            <td>{{student.age}}</td>
                                            <td>{{student.gender}}</td>
                                            <td>{{student.phoneNum}}</td>
                                            <td>{{student.size}}</td>
                                            <td>{{student.addr}}</td>
                                            <td>{{student.height}}</td>
                                            <td>
                                                <a href="javascript:;" @click="findById(student.id)">编辑</a>
                                                <a href="javascript:;" @click="deleteById(student.id)">删除</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-5"></div>
                                <div class="col-sm-12 col-md-7"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div id="fy" style="margin-left: 300px">
            <ul class="pagination" id="fy1">
                <li>
                    <a href="#" aria-label="Previous" @click="findAll(studentList.pageNum - 1)">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li v-for="i in studentList.pages"><a href="#" @click="findAll(i)">{{i}}</a></li>
                <li>
                    <a href="#" aria-label="Next" @click="findAll(studentList.pageNum + 1)">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--!&#45;&#45; 添加模态框 &ndash;&gt;-->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" id="">
            <div class="modal-content" height="500px">
                <form id="mtk">
                    <div class="form-group">
                        <label for="exampleInputEmail1">姓名</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" name="sname" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">年龄</label>
                        <input type="text" class="form-control" id="exampleInputPasword1" name="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">性别</label>
                        <input type="text" class="form-control" id="exampleInputassword1" name="gender" placeholder="性别">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">手机号</label>
                        <input type="text" class="form-control" id="exampleInptPassword1" name="phoneNum" placeholder="手机号">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">胸围</label>
                        <input type="text" class="form-control" id="exampleInutPassword1" name="size" placeholder="胸围">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">地址</label>
                        <input type="text" class="form-control" id="exampleIutPassword1" name="addr" placeholder="地址">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">身高</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" name="height" placeholder="身高">
                    </div>
                    <button type="submit" class="btn btn-default" @click="save">保存</button>
                </form>
            </div>
        </div>
    </div>
</div>
<style>

    #mtk {
        width: 897px;
        height: 550px;
        background: url(./image/04.jpg) no-repeat;
        background-size: 100%;
    }

    input {
        border: 1px solid #000;
        background: rgba(0, 0, 0, .3);
    }

    /*div{*/
    /*width: 500px;*/
    /*height: 500px;*/
    /*background: url(./image/02.jpg) no-repeat;*/
    /*}*/

    body {
        background: url(./image/05.jpg) no-repeat;
        background-size: 100% 100%;

        height: 745px;
        width: 800px;
    }

    #tb {
        background: rgba(0, 0, 0, 0);
    }

    /* 分页样式 */
    /*#fy{*/
    /*position: relative;*/
    /*}*/
    /*#fyl{*/
    /*position: absolute;*/
    /*top: 50px;*/
    /*bottom: 0;*/
    /*right: 0;*/
    /*}*/
</style>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/add.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/app.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/student.js"></script>


</body>
</html>